<template>
  <div>
    <el-card>
      <el-container>
        <el-aside width="220px">
          <img src="../../assets/img/u2198.png" />
          <div class="userInfo">
            <i class="el-icon-collection-tag"></i>
            <span>基本信息</span>
            <div class="commentUser">
              <img
                v-if="productInfo.userRsp.imagePath != null"
                :src="productInfo.userRsp.imagePath"
                alt=""
                class="avatar"
                style="border-radius: 50%; width: 55px; display: inline"
              />
              <img
                v-else
                src="../../assets/images/u2803.png"
                alt=""
                class="avatar"
                style="border-radius: 50%; width: 55px; display: inline"
              />
              <p style="color: #444; text-align: center">
                {{ productInfo.userRsp.name }}
              </p>
            </div>
            <div class="commentpProduct">
              <p style="color: #444">
                商品：<span style="color: #909399"
                  >{{ productInfo.productRsp.title }}
                </span>
              </p>
              <p style="color: #444">
                评分：<span style="color: #909399">
                  <el-rate
                    v-model="productInfo.contentScore"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  >
                  </el-rate>
                </span>
              </p>
              <p style="color: #444">
                日期：<span style="color: #909399">{{
                  productInfo.createTime
                }}</span>
              </p>
              <p style="color: #444">
                IP地址：<span style="color: #909399">{{
                  productInfo.userIp
                }}</span>
              </p>
            </div>
          </div>
        </el-aside>
        <el-main>
          <p style="font-size: 16px; font-weight: 700">商品评价</p>
          <el-divider></el-divider>
          <p>{{ productInfo.content }}</p>

          <!-- 商品图片 -->

          <p
            style="
              font-size: 16px;
              font-weight: 700;
              margin-top: 30px;
              margin-bottom: 20px;
            "
          >
            回复评论
          </p>
          <el-divider></el-divider>
          <div class="demo-image">
            <!-- ref重置表单时需要获取全局对象；  rules 表单验证;  model 绑定input属性值 -->
            <el-form
              :model="replyForm"
              :rules="replyFormRules"
              ref="replyFormRef"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="用户名：" prop="replyUserName">
                <el-input
                  type="text"
                  v-model="replyForm.replyUserName"
                  disabled="disabled"
                ></el-input>
              </el-form-item>
              <el-form-item label="回复内容：" prop="replyContent">
                <el-input
                  type="textarea"
                  v-model="replyForm.replyContent"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm()">提交</el-button>
                <span style="margin-left: 10px; color: #999999"
                  >注意：管理员回复内容会在前台显示</span
                >
              </el-form-item>
            </el-form>
          </div>
           <p
            style="
              font-size: 16px;
              font-weight: 700;
              margin-top: 30px;
              margin-bottom: 20px;
            "
          >
            回复评论
           </p>
           <el-divider></el-divider>
           <div style="float:left" v-if="productInfo.replyContent!=null">
              <img
                v-if="productInfo.userRsp.imagePath != null"
                :src="productInfo.userRsp.imagePath"
                alt=""
                class="avatar"
                style="border-radius: 50%; width: 55px; display: inline"
              />
              <img
                v-else
                src="../../assets/images/u2803.png"
                alt=""
                class="avatar"
                style="border-radius: 50%; width: 55px; display: inline"
              />
           </div>
           <div v-if="productInfo.replyContent!=null" style="font-size:14px;margin:10px">
               <p style="color: #444;display:block;margin:5px" >
                <span style="color: #909399;margin:10px" 
                  >{{this.userInfo.userName }}
                </span>
              </p>
              <p style="color: #444;display:block;margin:5px">
                <span style="margin:10px">回复{{productInfo.userRsp.name}}：</span><span style="color: #909399">
                 {{productInfo.replyContent}}
                </span>
              </p>
              <p style="color: #444;display:block;margin:5px">
                <span style="color: #909399;margin:10px" >{{
                  productInfo.replyDate
                }}</span>
              </p>
           </div>
        </el-main>
      </el-container>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fits: ['cover', 'cover', 'cover', 'cover', 'cover'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      //编辑商品表单
      productInfo: {
        title: '',
        oldPrice: 0,
        price: 0,
        number: 0,
        //商品所属的分类数组
        categoryId: [],
        //商品的详情描述
        intro: '',
        //参数
        productAttr: [],
        //排序
        marker: '0',
        //图片数组
        productPic: [],
       
      },
      replyForm: {},
      replyFormRules: {
        replyContent: [
          //validator指定自定义的校验规则
          { required: true, message: '评论回复不为空', trigger: 'blur' },
        ],
      },
        //获取当前的用户
      userInfo: {},
    }
  },

  created() {
     //获取当前用户  parse()json字符串转对象
    this.userInfo = JSON.parse(window.sessionStorage.getItem('user'))
    if (this.$route.name === 'commentInfo') {
      this.getProductList()
    }
  },

  methods: {
    //【编辑商品】获取商品评论数据
    async getProductList() {
      const { data: res } = await this.$http.get(
        'api/service-product/admin/product/comment/list',
        {
          params: {
            id: this.$route.params.id,
          },
        }
      )
      // console.log(res.data)

      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }

      //把数据列表赋值给catelist
      this.productInfo = res.data.records[0]

      //给图片拼接访问url
      if (this.productInfo.userRsp.imagePath) {
        this.productInfo.userRsp.imagePath =
          'http://8.134.34.190/' + this.productInfo.userRsp.imagePath
      }
      this.replyForm.replyUserName = this.userInfo.userName
      // //绑定动态参数
      // this.manyTableData = res1.data

      // // console.log(this.manyTableData)

      // //静态属性
      // this.onlyTableData = this.editForm.attrOnlyList

      // console.log(this.editForm)
    },

    //提交回复评论
    async submitForm() {
      this.replyForm.id = this.$route.params.id
      this.replyForm.replyUserId = this.productInfo.userRsp.id
      const { data: res } = await this.$http.put(
        'api/service-product/admin/product/comment/reply',this.replyForm
      )
       if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
       this.$message.success('回复成功！')
       this.getProductList()
    },
  },
}
</script>

<style lang="less" scoped>
.userInfo {
  display: block;
  position: absolute;
  top: 114px;
  left: 240px;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
}
.productpic {
  position: absolute;
  top: 497px;
  left: 240px;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
}

.block {
  float: left;
}
.commentUser {
  position: absolute;
  top: 70px;
  left: 50px;
}
.commentpProduct {
  position: absolute;
  top: 180px;
  width: 200px;
}
.el-divider {
  margin: 9px 0;
}
.el-form {
  width: 500px;
}
</style>